<script setup>
import {computed, onMounted, reactive, ref, useTemplateRef} from 'vue';
import {ElButton} from 'element-plus';
import {useDraggable} from './useDraggable.js'
import Point from "@/components/point.vue";
import {uniqueId} from "lodash";


const color_list = ref([
  {
    id: 1,
    color: "red",
  }, {
    id: 2,
    color: "blue",
  }, {
    id: 3,
    color: "#669966",
  }, {
    id: 4,
    color: "green",
  }
])

const list = ref([])

const getParent = (id) => {
  return color_list.value.find(i => i.id === id)
}

// 顶部点标记事件
const handlePointClick = (id) => {
  const point = {
    pid: id,
    id: uniqueId(),
    color: getParent(id).color
  }
  console.log(id)

  list.value.push(point)
}


// 默认放大倍数
const scale = ref(10);


const main_box = useTemplateRef("main_box")
const img_box = useTemplateRef('img_box')
const point_box = useTemplateRef("point_box")

// 图片
const {position} = useDraggable(img_box, main_box, false);


const url = "https://i.imgs.ovh/2025/10/23/7EEsCU.jpeg"
const image_original_width = ref(0)
const image_original_height = ref(0)

const image_display_width = computed(() => {
  return image_original_width.value * scale.value / 10
})
const image_display_height = computed(() => {
  return image_original_height.value * scale.value / 10
})

const img_box_position = reactive({
  top: 0,
  left: 0,
})

const getImageData = () => {
  const img = new Image();
  img.src = url;
  const width = img.naturalWidth
  const height = img.naturalHeight

  // 保存图片原始宽高
  image_original_width.value = width
  image_original_height.value = height

  // 设置图片初始位置为剧中
  position.value.x = (main_box.value.offsetWidth - width) / 2
}

// 按钮点击事件
const handleClick = (num) => {
  // 边缘判断
  if (num <= 5) {
    scale.value = 5
  } else if (num >= 20) {
    scale.value = 20
  } else {
    scale.value = num
  }
}


</script>

<template>
  <div class="p-5 flex-col flex gap-5">
    <div class="color flex gap-2">
      <div v-for="({ color, id }) in color_list" :key="id">
        <div class="rounded-full w-5 h-5" :style="{ backgroundColor: color }"
             @click="handlePointClick(id)"
        ></div>
      </div>
    </div>
    <div ref="main_box" class="main w-full h-[500px] overflow-hidden relative border border-blue-200">
      <div class="img-box relative" ref="img_box" :style="{
        width: image_display_width + 'px',
        height: image_display_height + 'px',
        top: (position.y ?? img_box_position.top) + 'px',
        left: (position.x ?? img_box_position.left) + 'px'
      }" @mousedown.stop="mousedown">
        <img :src="url" alt="" draggable="false" class="w-full h-full object-contain select-none relative"
             @load="getImageData">
        <div id="point_box" class="absolute left-0 top-0 w-full h-full z-99">
          <Point v-for="(tag, index) in list" :key="index"
                 :parent-ref="point_box"
                 :color="tag.color"
                 :pid="tag.pid"
                 :scale="scale"
                 :id="tag.id"
          />
        </div>

      </div>
    </div>

    <div class="flex gap-3 m-auto">
      <ElButton type="primary" @click="handleClick(scale + 1)">放大</ElButton>
      <ElButton type="primary" @click="handleClick(scale - 1)">缩小</ElButton>
    </div>
  </div>
</template>

<style scoped></style>
